<template>
	<view>
		<Header :title="'新增地址'"></Header>
		<view class="ding" @click="addDizhi">
			<u-icon name="map-fill" size="25" color="#D42A1B"></u-icon>
			<text class="ding_text" v-if="form.address">{{form.address}}</text>
			<text class="ding_text" v-else>使用当前定位</text>
		</view>
		<view class="address_info">
			<view class="" style="padding-bottom: 30rpx;">
				<view class="shuru">
					<view>收货人:</view>
					<input type="text" class="kuankuan" v-model="form.contact" placeholder="请填写收货人姓名">
				</view>
				<view class="line"></view>
				<view class="shuru">
					<view>手机号:</view>
					<input type="text" class="kuankuan" v-model="form.phone" placeholder="请填写收货人手机号">
				</view>
				<view class="line"></view>
				<!-- <view class="shuru">
					<view>地区:</view>
					<input type="text" class="kuankuan" v-model="form.city" placeholder="请填写地区">
				</view> -->
				<!-- <view class="line"></view> -->
				<view class="shuru">
					<view>详细地址:</view>
					<input type="text" class="kuankuan" v-model="form.address" placeholder="请填写详细地址">
				</view>
				<!-- <view class="line"></view> -->
				<!-- <view class="shuru">
					<view>门牌号:</view>
					<input type="text" class="kuankuan" v-model="form.detail" placeholder="请填写门牌号">
				</view> -->
			</view>
		</view>
		<view class="default">
			<u-form-item label-width="aotu" label="设为默认收货地址"><u-switch active-color="#21B070" slot="right"
					v-model="switchVal"></u-switch></u-form-item>
		</view>
		<view class="bottom_box">
			<view class="bottom_btn" @click="sunbit">保存</view>
			<view class="bottom_btn2" v-if="id" @click="delet">删除收货地址</view>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/header/header.vue'
	export default {
		data() {
			return {
				active: '',
				id: '',
				switchVal: true,
				background: {
					backgroundColor: '#FF9329'
				},
				form: {
					name: '',
					contact: '',
					detail: '',
					address: '',
					city: '',
					phone: '',
					defaultSetting: 1
				}
			};
		},
		onLoad(e) {
			if (e.id) {
				this.id = e.id
				this.cread()
			}
		},
		components:{
			Header
		},
		methods: {
			async delet() {
				let res = await this.$api.request('system/address/del/' + this.id, 'DELETE')
				if (res.code == 200) {
					uni.showToast({
						title: '删除成功',
						icon: 'none',
						success() {
							uni.navigateBack()
						}
					})
				}
			},
			async cread() {
				let res = await this.$api.request('system/address/detail/' + this.id, 'get')
				let data = res.data
				for (let k in this.form) {
					this.form[k] = data[k]
				}
				if(this.form.defaultSetting==1){
					this.switchVal = true
				}else{
					this.switchVal = false
				}
			},
			async sunbit() {
				if (this.switchVal) {
					this.form.defaultSetting = 1
				} else {
					this.form.defaultSetting = 0
				}
				let res
				if (this.id) {
					this.form.id = this.id
					res = await this.$api.request('system/address/update', 'put', this.form)
					if (res.code == 200) {
						uni.showToast({
							title: '修改成功',
							icon: 'none',
							success() {
								uni.navigateBack()
							}
						})
					}
				} else {
					res = await this.$api.request('system/address/save', 'post', this.form)
					if (res.code == 200) {
						uni.showToast({
							title: '添加成功',
							icon: 'none',
							success() {
								uni.navigateBack()
							}
						})
					}
				}
			},
			sel(val) {
				this.active = val;
				console.log(val);
			},
			addDizhi() {
				let that = this
				uni.chooseLocation({
					success: function(res) {
						console.log(res)
						that.form.address = res.address + res.name
					},
					fail(res) {
						console.log(res)
					}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.line {
		width: 650rpx;
		height: 1rpx;
		border-bottom: 1rpx solid #D5D5D5;
		margin-top: 20rpx;
	}

	.kuankuan {
		border: none;
		font-size: 28rpx;
	}

	.shuru {
		display: flex;
		width: 620rpx;
		font-size: 28rpx;
		margin-top: 20rpx;
		justify-content: space-between;
	}

	.shuru view {
		width: 20%;
	}

	.shuru input {
		width: 80%;
	}

	.ding {
		background-color: #fff;
		padding: 26rpx 30rpx;
		margin: 20rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;

		.ding_text {
			font-size: 28rpx;
			color: #D42A1B;
			line-height: 44rpx;
			margin-left: 20rpx;
		}
	}

	.address_info {
		border-radius: 16rpx;
		margin: 0 20rpx;
		padding: 20rpx 30rpx 0;
		background-color: #fff;
	}

	.default {
		border-radius: 16rpx;
		margin: 22rpx 20rpx 0;
		padding: 0 30rpx;
		background-color: #fff;
	}

	.bottom_box {
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-top: 80rpx;
		align-items: center;

		.bottom_btn {
			background: #D42A1B;
			font-size: 30rpx;
			line-height: 44rpx;
			padding: 20rpx 0;
			width: 630rpx;

			border-radius: 45rpx;
			color: #ffffff;
			text-align: center;
		}

		.bottom_btn2 {
			border: 2rpx solid #D42A1B;
			font-size: 30rpx;
			line-height: 44rpx;
			width: 630rpx;
			padding: 20rpx 0;
			margin-top: 40rpx;
			border-radius: 45rpx;
			color: #D42A1B;
			text-align: center;
		}
	}
</style>